<template>
	<view>
		<!-- 倒计时 -->
		<uni-popup v-if="type== 'countdown'" :ref="name" type="center" :mask-click="false" @touchmove.stop.prevent="moveHandle">
		    <view class="flex-column tipCenter">
		        <view class="title-row">
		            <text class="pop-title">{{title}}</text>
		        </view>
		        <view class="popup-content" :style="{'color':color}">{{content}}</view>
				<view class="second-num">({{number}}s)</view>
		    </view>
		</uni-popup>
		<!-- 支付 -->
		<uni-popup v-if="type== 'money'" :ref="name" type="center" :mask-click="false" @touchmove.stop.prevent="moveHandle">
		    <view class="flex-column pop-money">
		        <view class="title-row">
					<view class="title-left">{{title}}</view>
					<image @click="close" class="close" src="./photo_close.png" mode="aspectFit"></image>
		        </view>
				<template v-if="!contentChange">
					<view class="pop-money-content">
						<template v-for="item in list">
							<view class="pop-money-number":class="item.value == money? 'active': ''" @click="chooseMoney(item)">
								{{item.name}}
							</view>
						</template>
					</view>
					
					<view class="other-number">
						<!-- <text @click="changePop">其他金额</text> -->
					</view>
				</template>
				<template v-else>
					<view class="pop-money-content">
						<view class="custom-number" v-if="can_input">
							<text class="custom-input">￥</text>
							<input
							 class="custom-input"
							 type="text" 
							 :value="money" 
							 @input="inputMoney"
							 :focus="can_input"
							 @blur="blur"
							 />
						</view>
						<view class="custom-number" v-else @click="can_input = !can_input">￥{{displayMoney}}</view>
					</view>
					<view class="other-number">
						<text @click="changePop">固定金额</text>
					</view>
				</template>
				<view class="money-button">
					<text class="btn-text" @click="confirm">确定</text>
				</view>
		    </view>
		</uni-popup>
		<!-- 图片image -->
		<uni-popup v-if="type== 'image'" :ref="name" type="center" :mask-click="true" @touchmove.stop.prevent="moveHandle">
		    <view class="flex-column tipCenter" style="width: 580rpx;padding: 40rpx;">
				<text class="pop-text" v-if="info.name">{{info.name}}</text>
				<image class="pop-text item-img" :src="info.image" mode="widthFix" />
				<text class="pop-text" v-if="info.msg">{{info.msg}}</text>
		    </view>
		</uni-popup>
		<!-- 时间段 -->
		<uni-popup v-if="type== 'datetime'" :ref="name" type="bottom" :mask-click="false" @touchmove.stop.prevent="moveHandle">
		    <view class="flex-column tipCenter tipBottom">
				<view class="pop-title">{{title}}</view>				<view class="popup-content" :style="{'color':color}">
					<uni-datetime-picker
					 class="datetime"
					 :clear-icon="false"
					 type="datetime"
					 :border="false"
					 placeholder="请选择时间"
					 v-model="time"
					 @change="changeDate" />
				</view>
		        
				 <view class="popup-button">
					 <text class="btn-text" @click="close">取消</text>
				 	<text class="btn-text" @click="confirm">确定</text>
				 </view>
		    </view>
		</uni-popup>
	</view>
</template>

<script>
	/**空白提示
	 * @property {String} type 弹出层类型
	 * @property {String} name ref绑定
	 * @property {String} title 标题
	 * @property {String} content 内容
	 * @property {String} color 字体颜色
	 * @property {Number} status = 0 显示否则不显示
	 * @property {Number} num  倒计时
	 * @property {number} redirect 返回几层或跳转地址
	 */
	import { toast } from '@/common/checkForm.js'
	export default {
		props: {
			type: {
				type: String,
				default: 'countdown'
			},
			name: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '标题'
			},
			content: {
				type: String,
				default: ''
			},
			list: Array,
			color: {
				type: String,
				default: '#2D3038'
			},
			num: {
				type: Number,
				default: 5
			},
			redirect: {
				type: [Number,String],
				default: 1
			},
			info: {
				type: Object,
				default: function(){
					return {
						name: '',
						image: '',
						msg: '',
					}
				}
			}
		},
		data() {
			return {
				number: 0,
				contentChange: false,
				can_input: false,
				displayMoney: '0.00',
				money: '',
				time: ''
			};
		},
		watch:{
			num: {
				handler(val){
					this.number = val;
				},
				immediate: true
			},
			money(){
				let amtreg = /^\d+\.?\d{0,2}$/
				if(!amtreg.test(this.money)){
					// this.money = this.money.substring(0, this.money.length - 1)
					setTimeout(()=>{
						this.money = this.money.substring(0, this.money.length - 1)
					},0)
				}
				if(this.money.length > 1 && parseFloat(this.money) <= 9 && this.money.indexOf('0') == 0 && this.money.indexOf('.') == -1){
					setTimeout(()=>{
						this.money = this.money.replace('0', '')
					},0)
				}
				if(!this.money || isNaN(Math.ceil(this.money)) || Math.ceil(this.money) === 0){
					this.displayMoney = '0.00'
				}else{
					this.displayMoney = this.money
				}
			}
		},
		methods: {
			//日期选择
			changeDate(e){
				this.time = e
			},
			setTimer(){
				this.timer = setInterval(()=> {
					if (this.number === 0) {
						this.close()
						clearInterval(this.timer)
						this.number = this.num
						if(typeof this.redirect === 'number'){
							uni.navigateBack({delta: this.redirect })
						}
						if(typeof this.redirect === 'string'){
							uni.redirectTo({
								url: this.redirect
							})
						}
					} else {
						this.number --
					}
				}, 1000);
			},
			open(){
				this.$refs[this.name].open()
				if(this.type== 'countdown'){
					this.setTimer()
				}
			},
			close() {
				this.$refs[this.name].close()
			},
			chooseMoney(item){
				this.money = item.value
				this.displayMoney = '0.00'
			},
			changePop(){
				this.contentChange = !this.contentChange
				this.money = ''
			},
			blur(){
				this.can_input = false
				
			},
			inputMoney(e){
				this.money = e.detail.value
				
				// 检测几个小数点
				// 如果有一个检测后面数字个数
				//如果有两个
			},
			inputStatus(){
				
			},
			confirm(){
				if(this.type == 'datetime'){
					if(!this.time){
						toast('请选择时间')
						return
					}
					this.$emit('confirm',this.time)
				}
				this.close()
				if(this.type != 'datetime'){
					if(!this.money){
						return
					}
					let data = {
						money: this.money
					}
					this.$emit('confirm',data)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.tipCenter{
		width: 360rpx;
		padding: 40rpx 60rpx;
		border-radius: 17rpx;
		background-color: #FFFFFF;
		align-items: center;
		.pop-title {
			margin-top: 15rpx;
			color: #FF6B4F;
		}
		.popup-content{
			margin: 20rpx 0;
			text-align: center;
			color: #2D3038;
		}
		.second-num{
			color: #2D3038;
		}
		.pop-text{
			&+.pop-text{
				margin-top: 20rpx;
			}
		}
	}
	.tipBottom{
		padding: 0;
		width: initial;
		border-radius: 0;
		.pop-title {
			font-size: 18px;
			color: initial;
		}
		.popup-content{
			flex: 1;
			margin: 0;
			padding: 1.3em 1.6em 1.3em;
		}
	}
	.item-img{
		// margin-top: 20rpx;
		width: 580rpx;
	}
	.pop-money{
		width: 690rpx;
		padding: 30rpx;
		border-radius: 17rpx;
		background-color: #FFFFFF;
		.title-row{
			//#ifndef APP-NVUE
			display: flex;
			//#endif
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.title-left{
				font-size: 32rpx;
				font-weight: bold;
				color: #2D3038;
			}
			.close{
				width: 28rpx;
				height: 28rpx;
			}
		}
		.pop-money-content{
			//#ifndef APP-NVUE
			display: flex;
			//#endif
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			.pop-money-number{
				//#ifndef APP-NVUE
				display: flex;
				//#endif
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				// padding: 15rpx 62rpx;
				width: 192rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-weight: bold;
				font-size: 44rpx;
				color: #d2d2d2;
				border: 2rpx solid #d2d2d2;
				border-radius: 8rpx;
				&.active{
					color: $uni-color-red;
					border: 2rpx solid $uni-color-red;
				}
			}
			.custom-number{
				//#ifndef APP-NVUE
				display: flex;
				//#endif
				flex-direction: row;
				justify-content: center;
				margin-top: 80rpx;
				height: 82rpx;
				font-weight: bold;
				font-size: 62rpx;
				color: #B9BCC2;
				flex: 1;
				.custom-input{
					font-weight: bold;
					font-size: 62rpx;
					color: #2D3038;
				}
				.bottom-line{
					border: 1rpx solid #d2d2d2;
				}
			}
		}
		.other-number{
			//#ifndef APP-NVUE
			display: flex;
			//#endif
			flex-direction: row;
			justify-content: center;
			margin: 30rpx 0;
			font-size: 24rpx;
			color: $uni-color-blue;
		}
		.money-button{
			//#ifndef APP-NVUE
			display: flex;
			//#endif
			flex-direction: row;
			justify-content: center;
			padding-top: 30rpx;
			line-height: 45rpx;
			letter-spacing: 6rpx;
			font-size: 32rpx;
			position: relative;
			color: $uni-color-red;
			.btn-text{
				//#ifndef APP-NVUE
				display: flex;
				//#endif
				flex-direction: row;
				justify-content: center;
				width: 100%;
			}
			&::before{
				content: '';
				height: 2rpx;
				width: 690rpx;
				position: absolute;
				top: 0;
				background-color: #f1f1f1;
			}
		}
	}
	.datetime{
		/deep/ .uni-date-editor--x{
			border: 2rpx solid #A2A2A4;
			border-radius: 10rpx;
			.uni-date__icon-clear{
				display: none;
			}
			.uni-date-x{
				padding-right: 40rpx;
				width: 500rpx;
				height: 80rpx;
				line-height: 80rpx;
				&::after{
					content: '';
					position: absolute;
					right: 25rpx;
					top: 30rpx;
					width: 16rpx;
					height: 16rpx;
					border: 0;
					border-right: 2rpx;
					border-bottom: 2rpx;
					border-style: solid;
					border-color: #A2A2A4;
					transform: rotate(45deg);
					transform-origin: 17.5rpx 17.5rpx;
				}
				.uni-input-placeholder{
				color: #A2A2A4;
				}
			}
		}
	}
	
	.popup-button{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		&::before{
			content: '';
			position: absolute;
			left: 0;
			display: block;
			width: inherit;
			height: 2rpx;
			background-color: #C5CAD5;
		}
		.btn-text{
			height: 48px;
			line-height: 48px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
			flex: 1;
			&+.btn-text{
				color: $uni-color-blue;
				position: relative;
				&::before{
					content: '';
					position: absolute;
					left: 0;
					display: block;
					width: 2rpx;
					height: inherit;
					background-color: #C5CAD5;
				}
			}
		}
	}
</style>
